<template>
  <div class="building-occupancy-bar">
    <EChart
      :option="barOption"
      :width="width"
      :height="height"
    />
  </div>
</template>

<script setup>
import { computed } from 'vue'
import EChart from '@/components/EChart.vue'
import * as echarts from 'echarts'

const props = defineProps({
  // 数据数组，每个元素包含 name 和 value
  data: {
    type: Array,
    default: () => [
      { name: '博士楼1栋', value: 76 },
      { name: '职工楼B3栋', value: 89 },
      { name: '职工楼B2栋', value: 83 },
      { name: '职工楼B1栋', value: 95 },
      { name: '博士楼B11栋', value: 78 },
      { name: '博士楼B7栋', value: 87 },
      { name: '博士楼2栋', value: 92 }
    ]
  },
  // 容器尺寸
  width: {
    type: Number,
    default: 500
  },
  height: {
    type: Number,
    default: 400
  }
})

// 计算横向柱形图配置
const barOption = computed(() => {
  return {
    title: {
      text: '楼栋入住率',
      textStyle: {
        fontSize: 20,
        fontWeight: 'bold',
        color: '#e6ff00'
      },
      left: 'center',
      top: 10
    },

    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: 'rgba(24, 144, 255, 0.3)',
      borderWidth: 1,
      textStyle: {
        color: '#ffffff',
        fontSize: 14
      },
      formatter: function(params) {
        return `
          <div style="padding: 8px;">
            <div style="color: ${params.color}; font-weight: bold; margin-bottom: 4px;">
              ${params.name}
            </div>
            <div>入住率: ${params.value}%</div>
          </div>
        `
      }
    },

    grid: {
      left: '15%',
      right: '8%',
      top: '15%',
      bottom: '15%'
    },

    xAxis: {
      type: 'value',
      name: '入住率(%)',
      nameTextStyle: {
        fontSize: 14,
        color: '#bfbfbf',
        padding: [0, 10, 0, 0]
      },
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf',
        formatter: '{value}%'
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      min: 0,
      max: 100
    },

    yAxis: {
      type: 'category',
      data: props.data.map(item => item.name),
      axisLabel: {
        fontSize: 14,
        color: '#bfbfbf',
        interval: 0, // 强制显示所有标签
        margin: 10
      },
      axisLine: {
        lineStyle: {
          color: '#404040'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      }
    },

    series: [{
      type: 'bar',
      data: props.data.map((item, index) => ({
        value: item.value,
        name: item.name,
        itemStyle: {
          color: getBarColor(item.value)
        }
      })),
      label: {
        show: true,
        position: 'right',
        fontSize: 14,
        fontWeight: 'bold',
        color: '#ffffff',
        formatter: '{c}%'
      },
      barWidth: '60%', // 柱子宽度
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      animationType: 'slide',
      animationEasing: 'elasticOut',
      animationDelay: function (idx) {
        return idx * 100
      }
    }]
  }
})

// 根据入住率获取渐变颜色
const getBarColor = (rate) => {
  if (rate >= 90) {
    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#52c41a' },
      { offset: 1, color: '#73d13d' }
    ])
  } else if (rate >= 80) {
    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#faad14' },
      { offset: 1, color: '#ffc53d' }
    ])
  } else {
    return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      { offset: 0, color: '#ff4d4f' },
      { offset: 1, color: '#fa8c16' }
    ])
  }
}
</script>

<style scoped>
.building-occupancy-bar {
  width: 100%;
  height: 100%;
}
</style>
